<template>
  <div>
    <a-card :bordered="false">
      <f-search-form :more="true" @searchHandler="searchHandler" :tableObj="$refs.table" :global-params="{activeKey:this.activeKey}">
        <f-search-form-item label="部门" ref="dept" name="deptId" type="select" :data="api.dept.list"  valueKey="deptId" label-key="deptName" style="width: 220px"/>
        <f-search-form-item label="单号" name="orderNo" style="width: 200px"/>
        <f-search-form-item label="开始日期" type="date" name="beginDate" style="width: 240px"/>
        <f-search-form-item label="结束日期" type="date" name="endDate" style="width: 240px"/>
        <f-search-form-item label="供方资信" type="select" slot="advanced" name="supplierBondType" :data="api.busOrder.supplierBondType" style="width: 260px"/>
        <f-search-form-item label="购方资信" type="select" slot="advanced" name="customBondType" :data="api.busOrder.customBondType" style="width: 260px"/>
        <f-search-form-item label="购货方" name="customName" slot="advanced" style="width: 250px"/>
        <f-search-form-item label="供货方" name="supplierName" slot="advanced" style="width: 250px"/>
      </f-search-form>
      <a-tabs @change='changeHandler'>
        <a-tab-pane key="0" tab="未审批">
        </a-tab-pane>
        <a-tab-pane key="1" tab="未回款">
        </a-tab-pane>
        <a-tab-pane key="2" tab="已审批">
        </a-tab-pane>

      </a-tabs>
      <f-table ref="table" size="small" rowKey="orderId"  :showSetting="true" :setting-key="this.activeKey"  :tableColumns="columns"  order="sendDate" :multiple="false" :scroll="scroll" :operator="operator" :params="queryParam" :api="api.busOrder" handler="nqOrderListHandler">
        <span slot="orderNo" slot-scope="text, record, index">
          <span v-clipboard:copy="text" v-clipboard:success="onCopy" style="cursor:pointer" v-if='record.dayNum==-1'>{{text}}</span>
          <a-tooltip :title="'已超期'+record.dayNum+'天'" placement='topLeft'>
          <a-tag color="#f50" v-clipboard:copy="text" v-clipboard:success="onCopy"  v-if='record.dayNum<-1'>{{text}}</a-tag>
          </a-tooltip>
          <a-tooltip :title="record.dayNum+'天后到期'" placement='topLeft'>
          <a-tag color="orange" v-clipboard:copy="text" v-clipboard:success="onCopy"  v-if='record.dayNum>=0&&record.dayNum<=30'>{{text}}</a-tag>
          </a-tooltip>
           <a-tooltip :title="record.dayNum+'天后到期'" placement='topLeft'>
            <a-tag color="pink" v-clipboard:copy="text" v-clipboard:success="onCopy"  v-if='record.dayNum>30&&record.dayNum<=60'>{{text}}</a-tag>
           </a-tooltip>
            <a-tooltip :title="record.dayNum+'天后到期'" placement='topLeft'>
          <a-tag color="red" v-clipboard:copy="text" v-clipboard:success="onCopy"  v-if='record.dayNum>60'>{{text}}</a-tag>
            </a-tooltip>
        </span>
        <span slot="supplierBondType" slot-scope="text, record, index">
            <a-tag color="#2db7f5" v-if="text==0">不垫付</a-tag>
            <a-tag color="purple" v-if="text==1">底价</a-tag>
            <a-tag color="purple" v-if="text==2">底价+税金</a-tag>
            <a-tag color="purple" v-if="text==3">税金</a-tag>
            <a-tag color="purple" v-if="text==6">底价/2+税金</a-tag>
            <a-tag color="purple" v-if="text==5">全额垫付</a-tag>
            <a-tag color="purple" v-if="text==8">销售金额*费率</a-tag>
        </span>
        <span slot="customBondType" slot-scope="text, record, index">
           <a-tag color="#2db7f5" v-if="text==0">全款</a-tag>
            <a-tag color="purple" v-if="text==1">底价</a-tag>
            <a-tag color="purple" v-if="text==2">底价+税金</a-tag>
            <a-tag color="purple" v-if="text==6">底价/2+税金</a-tag>
            <a-tag color="purple" v-if="text==3">税金</a-tag>
            <a-tag color="purple" v-if="text==5">全额资信</a-tag>
            <a-tag color="purple" v-if="text==7">预付款</a-tag>
        </span>
        <span slot="sendState" slot-scope="text, record, index">
            <a-tag color="#87d068" v-if="text==0">未发货</a-tag>
            <a-tag color="#108ee9" v-if="text==1">已发货</a-tag>
        </span>
        <span slot="takeAmount" slot-scope="text, record, index">
            <a-tag color="#f50" v-if="record.overAmount">
              <a-tooltip :title="'多收'+record.overAmount">{{text}}</a-tooltip>
            </a-tag>
            <a-tag  v-if="!record.overAmount">{{text}}</a-tag>
        </span>
        <span slot="orderState" slot-scope="text, record, index">
            <a-tag color="pink" v-if="text==0">未提交</a-tag>
            <a-tag color="#87d068" v-if="text==1" @click="processImg(record)">{{record.taskName}}</a-tag>
            <a-tag color="#f50" v-if="text==2">已审批</a-tag>
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="startProcess(record)" v-if="record.orderState==0">提交</a>
            <a @click="completeTask(record)" v-if="record.taskDefinitionKey&&record.taskDefinitionKey=='__initiator__'">重新提交</a>


            <a-divider type="vertical" v-if="record.orderState==0||record.taskDefinitionKey=='__initiator__'"/>
             <a @click="$refs.orderInfoDrawer.showDrawer(record)" v-if="record.orderState>=0">查看</a>
            <a-divider type="vertical" v-if="record.orderState>0"/>
             <a href="javascript:;" v-if="record.delivery==2&&record.orderState==2" @click="$refs.orderReturnDrawer.showDrawer(record)">回款</a>
             <a href="javascript:;" v-if="record.delivery==1&&record.orderState==2&&record.orderType==1" @click="$refs.orderReturnDrawer.showDrawer(record)">退货</a>
            <a-divider type="vertical" v-if="record.orderState==0"/>
            <a-divider type="vertical" v-if="record.orderState==2"/>
             <a-dropdown>
            <a class="ant-dropdown-link" v-if="text!='-'">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
                <a-menu-item v-if="record.orderState==1">
                <a href="javascript:;" @click="processImg(record)">审批进度</a>
              </a-menu-item>
               <a-menu-item v-if="record.orderState==0||record.taskDefinitionKey=='__initiator__'">
               <a @click="$refs.drawer.showDrawer(record)" >编辑</a>
                 </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="printOrder(record)" v-if="record.orderType==1">发货单</a>
                 <a href="javascript:;" @click="printOrder(record)" v-if="record.orderType==2">退货单</a>
                 <a href="javascript:;" @click="printOrder(record)" v-if="record.orderType==3">补货单</a>
              </a-menu-item>
               <a-menu-item v-if="record.orderState==0||record.taskDefinitionKey=='__initiator__'">
                <a href="javascript:;" @click="$refs.table.del(record,{processInstanceId:record.processInstanceId})">删除</a>
              </a-menu-item>
               <a-menu-item v-if="record.orderState==2&&record.orderType==1&&record.delivery==1">
                   <a @click="$refs.orderTuibuDrawer.showDrawer(record)">退补货</a>
              </a-menu-item>
               <a-menu-item v-if='superAdmin'>
                <a href="javascript:;" @click="deleteProcessInstance(record)">删除实例</a>
              </a-menu-item>

            </a-menu>
          </a-dropdown>
          </template>

        </span>
      </f-table>
      <order-drawer ref="drawer" @success="onLoad"></order-drawer>
      <order-info-drawer ref="orderInfoDrawer"></order-info-drawer>
      <order-return-drawer ref="orderReturnDrawer"></order-return-drawer>
      <order-tuibu-drawer ref="orderTuibuDrawer"></order-tuibu-drawer>
      <process-image ref="processImg" v-if="processImageVisible" :visible.sync="processImageVisible" :processInstanceId="processInstanceId"></process-image>
      <print-modal ref="printModal"></print-modal>
    </a-card>
  </div>
</template>
<script>
  import orderDrawer from './order_drawer.vue'
  import api from './js/api'
  import OrderInfoDrawer from './order_info_drawer'
  import OrderReturnDrawer from './order_return_drawer'
  import ProcessImage from '../../flowable/process/process_image'
  import PrintModal from './print/print_modal'
  import OrderTuibuDrawer from './order_tuibu_drawer'

  export default {
    name: 'OrderList',
    components: {
      OrderTuibuDrawer,
      PrintModal,
      ProcessImage,
      OrderReturnDrawer,
      OrderInfoDrawer,
      orderDrawer
    },
    data() {
      let me = this
      //操作按钮
      let operator = []
      operator.push({
        name: '添加订单',
        icon: 'plus',
        that: this,
        handler: function(table, that) {
          that.$refs.drawer.showDrawer()
        }
      })
      operator.push({
        name: '删除',
        icon: 'delete',
        batch: true,
        handler: function(table) {
          table.remove()
        }
      })
      return {
        api: Object.assign(api, this.api),
        //列表初始化查询参数
        queryParam: {
          companyId: ''
        },
        activeKey:0,
        superAdmin: this.superAdmin,
        processImageVisible: false,
        scroll: { x: true },
        // 表头
        columns: [
          {
            title: '#',
            width: '50px',
            fixed: 'left',
            align: 'center',
            dataIndex: 'rowIndex',
            customRender: function (text, r, index) {
              return (text !== '合计') ? (parseInt(index) + 1) : text
            }
          },
          {
            title: '操作',
            align: 'left',
            width: '180px',
            fixed: 'left',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          },
          {
            title: '单号',
            align: 'left',
            width: '125px',
            dataIndex: 'orderNo',
            fixed: 'left',
            scopedSlots: { customRender: 'orderNo' }
          },
          {
            title: '发货日期',
            align: 'left',
            sorter: true,
            width: '100px',
            dataIndex: 'sendDate',
            customRender: function(text, record, index) {
              if (text) {
                return text
              } else {
                return '未发货'
              }
            }
          },
          {
            title: '供货方',
            align: 'left',
            width: '140px',
            ellipsis: true,
            dataIndex: 'supplierName'
          },
          {
            title: '供方资信',
            align: 'left',
            width: '90px',
            dataIndex: 'supplierBondType',
            scopedSlots: { customRender: 'supplierBondType' }
          },
          {
            title: '购货方',
            align: 'left',
            ellipsis: true,
            width: '180px',
            dataIndex: 'customName'
          },
          {
            title: '购方资信',
            align: 'left',
            width: '90px',
            dataIndex: 'customBondType',
            scopedSlots: { customRender: 'customBondType' }
          },
          {
            title: '部门',
            align: 'left',
            width: '80px',
            dataIndex: 'deptName'
          },
          {
            title: '业务员',
            align: 'left',
            width: '70px',
            dataIndex: 'saleManName'
          },
          {
            title: '发货金额',
            align: 'left',
            width: '80px',
            dataIndex: 'saleAmount'
          },
          {
            title: '数量',
            align: 'left',
            width: '60px',
            dataIndex: 'saleNum'
          },
          {
            title: '药品名称',
            align: 'left',
            width: '120px',
            ellipsis: true,
            dataIndex: 'drugsName'
          },
          {
            title: '规格',
            align: 'left',
            width: '80px',
            dataIndex: 'drugsSpec'
          },
          {
            title: '收款金额',
            align: 'left',
            width: '80px',
            needTotal:true,
            dataIndex: 'takeAmount',
            scopedSlots: { customRender: 'takeAmount' }
          },
          {
            title: '收款日期',
            align: 'left',
            width: '110px',
            sorter: true,
            dataIndex: 'takeDate'
          },
          {
            title: '收款账户',
            align: 'left',
            ellipsis: true,
            width: '125px',
            dataIndex: 'bankName',
            customRender: function(text, record, index) {
              if (record.customBondType == 0) {
                return '客户付'
              } else {
                return text
              }
            }
          },
          {
            title: '制单人',
            align: 'left',
            ellipsis: true,
            width: '80px',
            dataIndex: 'nickName'
          },
          {
            title: '资信天数',
            align: 'left',
            width: '80px',
            dataIndex: 'reputation'
          },
          {
            title: '资信日期',
            align: 'left',
            width: '100px',
            dataIndex: 'reputationDate'
          },
          {
            title: '创建日期',
            align: 'left',
            width: '185px',
            sorter: true,
            dataIndex: 'createTime'
          },
          {
            title: '订单状态',
            align: 'left',
            fixed: 'right',
            width: '100px',
            dataIndex: 'orderState',
            scopedSlots: { customRender: 'orderState' }
          }
        ],
        operator: operator
      }
    },
    created() {
    },
    mounted() {

    },

    methods: {
      onCopy() {
        this.$message.success('复制成功!')
      },
      onLoad() {
        this.$refs.table.refresh()
      },
      processImg(order) {
        this.processInstanceId = order.processInstanceId
        this.processImageVisible = true
      },
      deleteProcessInstance(task) {
        this.http.confirm(this, {
          content: '确认删除吗?',
          url: api.processInstance.remove,
          data: {
            ids: task.processInstanceId,
            cascade:true
          },
          success: function(me, data) {
            me.$refs['table'].refresh(false)
          }
        })
      },
      //重新提交
      completeTask(order) {
        this.http.confirm(this, {
          content: '确认提交订单吗?',
          url: api.tasktodo.complete,
          requestBody: true,
          data: {
            taskId: order.taskId
          },
          success: function(me, data) {
            me.$refs.table.refresh()
          }
        })
      },
      startProcess(order) {
        this.http.confirm(this, {
          content: '确认提交订单吗?',
          url: api.processInstance.start,
          requestBody: true,
          data: {
            handlerName: 'orderStartProcessHandler',
            businessKey: order.orderId
          },
          success: function(me, data) {
            me.$refs.table.refresh()
          }
        })
      },
      printOrder(record) {
        this.$refs['printModal'].open(record.orderId, 1)
      },
      changeHandler(activeKey){
        this.activeKey=activeKey;
        this.$refs.table.refresh(true,{activeKey:this.activeKey})
      }
    }
  }
</script>
